<!--电子围栏回显页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">围栏展示</span>
    <!-- 为返回按钮实现点击返回至上一页"电子围栏管理页" -->
    <el-button @click="router.push('/geofence')" type="primary" style="float:right;margin-top:13px;">返回</el-button>
  </div>
  <div style="width: 100%; height:84vh;" id="mapContainer"></div>
</template>
<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {DrawScene, DrawControl,OperateEventType} from 'bmap-draw';
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";

//定义电子围栏对象
const geofence = ref({
  name:'', //围栏名称
  position:{} //围栏信息
});

//声明全局的地图变量
var map;
onMounted(()=>{
  //nextTick 表示在DOM更新之后执行，确保地图能在div创建之后渲染
  nextTick(()=>{
    //创建地图实例,放入之前准备好的容器中
    //注意:BMapGL不需要导入！忽略提示
    map = new BMapGL.Map("mapContainer");
    showGeofence();
  })
})
const geofenceId = new URLSearchParams(window.location.search).get('id');
const showGeofence = () => {
  axios.get(BASE_URL+'/v1/geofence/select?id='+geofenceId).then(res => {
    if (res.data.code === 2000) {
      //加载地图数据坐标点
      let data=JSON.parse(res.data.data[0].position);
      //定义一个遮盖物(也就是咱们之前绘制的圆形和矩形)
      let overlayShow;
      //判断是圆形还是矩形
      if (data.type === 'circle') {
        //创建圆形,传入之前保存的中心点坐标和半径,并且设置边的颜色,宽度,透明度
        overlayShow = new BMapGL.Circle(
            new BMapGL.Point(data.longitude, data.latitude),
            data.radius,{strokeColor: "green", strokeWeight: 2, strokeOpacity: 1});
        let point = new BMapGL.Point(116.4074, 39.9024);
        // 初始化地图,设置中心点和地图级别
        //中心点设置为圆形的圆心
        map.centerAndZoom(point, 15);
        map.addOverlay(overlayShow);
      } else {
        let points = data.recPoints.split(',');
        let vertexes = [];
        //循环遍历,将字符串转换为坐标点
        for(let i=0;i<points.length;i++){
          if(i==0){
            //设置中心点为第一个顶点
            let point =new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1]);
            // 初始化地图,设置中心点和地图级别
            map.centerAndZoom(point, 15);
          }
          vertexes.push(new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1]));
        }
        //创建多边形(矩形就是一个多边形),传入之前保存的中心点坐标和半径,并且设置边的颜色,宽度,透明度
        overlayShow= new BMapGL.Polygon(vertexes,
            {strokeColor: "green", strokeWeight: 2, strokeOpacity: 1});
      }
      map.addOverlay(overlayShow);
    }
  })
}

//定义关闭弹窗的方法
const closeDialog = ()=>{
  if (confirm('确认取消新增围栏吗?')){
    dialogVisible.value = false;
    map.clearOverlays();
  }
}

</script>

<style scoped>
</style>